<!-- @format -->

<template>
  <van-field
    :model-value="selectValue"
    readonly
    :label="title"
    :placeholder="`请选择${title}`"
    @click-input="clickSelect"
  >
    <template #button>
      <slot name="button"></slot>
    </template>
  </van-field>

  <van-popup
    v-model:show="visible"
    position="bottom"
    style="height: 100vh"
  >
    <van-notice-bar
      wrapable
      :scrollable="false"
      text="没有合适的讲题请滑到此页面最下方，手动输入讲题"
    />
    <div class="select_speaker">
      <div class="vol_meeting_list">
        <van-empty
          v-if="topicList.length == 0"
          image="//projectimg-1256680128.cos.ap-beijing.myqcloud.com/lpm/bd4d50fd-1214-423a-bbe8-2bc72dbd45b3.png"
          image-size="80"
          description="没有可选讲题"
        />
        <van-cell
          v-for="(item, index) in topicList"
          :key="`indexitemtopic${index}`"
          :title="item.topic"
          is-link
          @click="clickConfirm(item)"
        />
        <van-field
          style="margin-bottom: 25px"
          v-model="inputValue"
          placeholder="找不到合适的讲题？请输入"
          clearable
          @clear="inputValue = ''"
        >
          <template
            v-if="inputValue"
            #button
          >
            <van-button
              size="small"
              type="primary"
              @click="onInputConfirm"
              >确定</van-button
            >
          </template>
        </van-field>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { computed, toRefs, ref, inject, onMounted } from 'vue'

const props = defineProps({
  modelValue: {
    type: Array,
    default: [],
  },
  list: {
    type: Array,
    default: [],
  },
  title: {
    type: String,
    default: '',
  },
  speakerFormat: {
    type: Function,
    default: null,
  },
})
const emits = defineEmits(['update:modelValue'])
const api = inject('api')

const topicList = inject('constant').topic
const visible = ref(false)
const inputValue = ref('')

const selectValue = computed(() => {
  const { modelValue } = toRefs(props)
  return modelValue.value
})

function getCellClass(item) {
  const isExist = selectList.value.some((val) => val.id === item.id)
  return isExist ? 'active' : ''
}

function clickSelect() {
  visible.value = true
  inputValue.value = ''
}
function clickCancel() {
  visible.value = false

}

function onInputConfirm() {
  emits('update:modelValue', inputValue.value)
  clickCancel()
}
function clickConfirm(item) {
  emits('update:modelValue', item.topic)
  clickCancel()
}

</script>

<style lang="less"></style>
